<template>
  <div>
    <main-nav index="4"></main-nav>
    <div class="container margin-top-15">
      <i-card dis-hover :bordered="false">
        <p slot="title">全部问答</p>
        <router-link :to="{name: 'new-question'}" slot="extra">
          <i-icon type="ios-plus"></i-icon>
          <span>提问</span>
        </router-link>
        <i-form @submit.native.prevent="search()">
          <filters @changed="filterChanged" :editionsVisible="false"></filters>
        </i-form>
      </i-card>
      <div class="main-container">
        <div class="margin-top-10">
          <post-item :data="item" v-for="(item, index) in posts" :key="'post_' + index"></post-item>
        </div>
        <p v-show="totalPosts === 0">暂无数据</p>
        <i-page class="margin-top-10" :page-size="20" v-show="totalPosts" :total="totalPosts" style="text-align: center" :current="query.page" size="small" @on-change="search" show-total show-elevator></i-page>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Filters from '../components/filters'
import MainNav from '../components/main-nav'
import PostItem from '../components/post-item'
export default {
  data() {
    return {
      query: {
        grade: null,
        subject: null,
        page: 1
      }
    }
  },
  components: {
    MainNav,
    Filters,
    PostItem
  },
  computed: {
    ...mapGetters({
      totalPosts: 'totalPosts',
      posts: 'posts'
    })
  },
  watch: {},
  methods: {
    ...mapActions({
      searchPosts: 'searchPosts'
    }),
    search(page) {
      this.query.page = page || 1
      this.searchPosts(this.query)
    },
    filterChanged(data) {
      this.query.grade = data.grade
      this.query.subject = data.subject

      this.search()
    }
  },
  mounted() {
    this.search()
  }
}
</script>
